<template>
	<v-container fluid style="padding: 0">
		<v-row no-gutters>
			<v-col cols="7" class="md-login-info main-part d-none d-lg-flex">
				<v-flex>
					<v-img src="https://templates-flatlogic.herokuapp.com/vue-material/img/logo.a0185b04.svg" width="120px" height="100px" style="margin: 0 auto"/>
					<p>Vuetify Forums Admin</p>
				</v-flex>
			</v-col>
			<v-col cols="12" lg="5" class="md-login">
				<div class="md-login-penal">
					<v-tabs fixed-tabs v-model="tab">
						<v-tab key="login">Login</v-tab>
						<v-tab key="register">Register</v-tab>
					</v-tabs>
					<v-tabs-items v-model="tab">
						<v-tab-item key="login">
							<v-form ref="login" @submit.prevent="onLoginSubmit" v-model="loginIsOK" class="text-center">
								<p class="display-2 text-center font-weight-medium my-10">你好呀</p>
								<v-btn class="text-capitalize elevation-0 mb-10" width="300px">
									<v-avatar size="20" class="mr-4">
										<v-img src="https://templates-flatlogic.herokuapp.com/vue-material/img/google.695a3160.svg"/>
									</v-avatar>
									Sign in with Google
								</v-btn>
								<div class="d-flex align-center my-3 my-sm-8 col col-12">
									<v-divider/>
									<span class="px-5 white--text"> or  </span>
									<v-divider/>
								</div>
								<v-text-field v-model="loginForm.email" type="email" label="邮箱地址" required :rules="loginFormRules.email"/>
								<v-text-field v-model="loginForm.password" type="password" label="密码 " required :rules="loginFormRules.password"/>
								<br>
								<v-row no-gutters>
									<v-col cols="5" class="text-left">
										<v-btn type="submit" large color="primary" :loading="loading">登陆</v-btn>
									</v-col>
									<v-col cols="7" class="text-right">
										<v-btn link :to="{name: 'ForgetPassword'}" large text color="primary">忘记密码</v-btn>
									</v-col>
								</v-row>
							</v-form>
						</v-tab-item>
						<v-tab-item key="register">
							<p class="display-2 text-center font-weight-medium my-10">Welcome!</p>
							<p class="display-1 text-center font-weight-medium mb-10">Create your account</p>
							<v-form ref="register" @submit.prevent="onRegisterSubmit">
								<v-text-field label="用户昵称" v-model="registerForm.username" :rules="registerFormRules.username"/>
								<v-text-field label="邮箱地址" v-model="registerForm.email" :rules="registerFormRules.email" type="email"/>
								<v-text-field label="密码" v-model="registerForm.password" :rules="registerFormRules.password" type="password"/>
								<v-text-field label="确认密码" v-model="registerForm.password_confirmation" :rules="registerFormRules.password_confirmation" type="password"/>
								<v-btn block color="primary" large class="mt-10 mb-10" type="submit"> Create your account</v-btn>
							</v-form>
						</v-tab-item>
					</v-tabs-items>
				</div>
			</v-col>
		</v-row>
	</v-container>
</template>

<script>
import UserApi from '@/common/api/UserApi';

export default {
	data() {
		return {
			tab: 'register',
			loginIsOK: false,
			loading: false,
			loginForm: {
				email: '754060604@qq.com',
				password: 'Xuan588200'
			},
			loginFormRules: {
				email: this.$utils.formValidator(['required', 'email']),
				password: this.$utils.formValidator(['required', 'string', 'min:6'])
			},
			registerForm: {
				username: undefined,
				email: undefined,
				password: undefined,
				password_confirmation: undefined
			},
			registerFormRules: {
				username: this.$utils.formValidator(['required', 'string', 'min:2', 'max:64']),
				email: this.$utils.formValidator(['required', 'email', 'max:64']),
				password: this.$utils.formValidator(['required', 'string', 'min:6', 'max:64']),
				password_confirmation: [...this.$utils.formValidator(['required', 'string', 'min:6', 'max:64'])]
			}
		}
	},
	methods: {
		onLoginSubmit() {
			if (this.$refs.login.validate()) {
				this.loading = true
				this.$store.dispatch('login', this.loginForm).then(data => {
					this.$store.dispatch('getMenus').then(() => {
						this.$router.replace({name: 'Admin'})
					})
				}).finally(() => this.loading = false);
			}
		},
		onRegisterSubmit() {
			if (this.$refs.register.validate()) {
				UserApi.create(this.registerForm).then(res => {
					this.$utils.responseHandler(res);
				})
			}
		}
	}
}
</script>

<style scoped lang="scss">
@media (min-width: 1264px) {
	.container .d-lg-flex {
		display: flex !important;
	}
}

.md-login-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #536dfe;

	.flex {
		justify-content: center;
		flex-direction: column;
		align-items: center;
		flex: 0 0 300px;

		> p {
			text-align: center;
			font-family: Roboto, sans-serif;
			font-size: 84px;
			color: #fff;
			font-weight: 500;
		}
	}
}

.md-login {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;

	.md-login-penal {
		flex: 0 0 400px;
		min-height: 700px;

		.v-tabs {
			&.theme--dark {
				.v-tab--active {
					color: white;
				}
			}
			::v-deep {
				> div {
					background-color: transparent;
				}
			}
		}


		.theme--dark.v-tabs-items {
			background-color: transparent;
		}
	}
}
</style>